<template>
  <view class="order-detail" :class="[data.gender == '男'?'boy-bg':'girl-bg']">

    <!--  顶部  -->
    <view class="top-adr">
      <view class="adr">地址：广东省金湾区音乐酒吧</view>
      <view class="phone">孔明 13388888888</view>
    </view>

    <!--  头像  -->
    <view class="intro">
      <view class="avatar">
        <image :src="data.advertisingImg" mode="aspectFill"></image>
      </view>
      <view class="msg">
        <view class="name">
          <span :class="txtColor">{{ data.name }}</span>
          <span :class="txtColor" style="font-size: 40rpx;margin-left: 20rpx">{{ data.age }}</span>
        </view>
        <view class="textview"></view>
        <view class="tag">
          <view :class="[bgColor]">剧本杀</view>
          <view :class="[bgColor]">密室逃脱</view>
        </view>
      </view>
    </view>

    <!--  订单信息  -->
    <view class="order-msg">
      <!--   时长   -->
      <view class="min">
        <view>时长:</view>
        <view>5小时</view>
      </view>
      <!--   单价   -->
      <view class="item" v-for="(item,index) in mock" :key="index">
        <view>{{ item.title }}</view>
        <view style="display: flex;width: 200rpx" :class="[txtColor]">
          <view style="flex: 1" :class="[data.gender == '男'?'boy-coin':'girl-coin']"></view>
          <view>{{ item.money }}</view>
        </view>
      </view>

    </view>

    <!--  订单编号  -->
    <view class="order-msg"  style="margin-top: 0rpx;border: 0px">
      <view class="item" v-for="(item,index) in mock2" :key="index">
        <view>{{item.title}}</view>
        <view>{{item.msg}}</view>
      </view>
    </view>

    <!--  按钮  -->
    <view class="btn">
      <view :class="[bgColor]">拨打电话</view>
      <view :class="[bgColor]">待到达</view>
      <view :class="[bgColor]">撤销订单</view>
    </view>

  </view>
</template>

<script>
export default {
  name: "index",
  onLoad(options) {
    // 接收上一个页面传递的数据
    this.data = JSON.parse(decodeURIComponent(options.data))
  },
  data() {
    return {
      data: {},
      mock: [
        {
          title: '总价',
          money: '188币'
        },
        {
          title: '总价',
          money: '188币'
        },
        {
          title: '优惠金额',
          money: '188币'
        },
        {
          title: '实际付款',
          money: '188币'
        },

      ],
      mock2:[
        {
          title: '订单编号',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },

        {
          title: '优惠券',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },
        {
          title: '备注信息',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },
        {
          title: '订单创建时间',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },
        {
          title: '开始计费时间',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },
        {
          title: '结束计费时间',
          msg: 'xxxxxxxxxxxxxxxxxxxxx'
        },
      ],
    }
  },
  methods: {},
  computed: {
    bgColor() {
      let color = (this.data.gender == '男' ? 'blue' : 'red')
      return `zy-dark-bg-${color}`
    },

    txtColor() {
      let color = (this.data.gender == '男' ? 'blue' : 'red')
      return `zy-dark-${color}`
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/css/color.scss";

.order-detail {
  padding: 10rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  //地址
  .top-adr {
    padding: 10rpx 50rpx;
    border: solid 1px #847f7d;
    border-radius: 10rpx;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

    .adr {
      font-size: 40rpx;
      font-weight: bolder;
    }

    .phone {
      margin-top: 15rpx;
    }

  }

  //个人信息
  .intro {
    margin-top: 40rpx;
    display: flex;
    height: 290rpx;

    .avatar {
      flex: 2;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .msg {
      flex: 3;
      margin-left: 20rpx;
      padding: 15rpx;
      //background-color: #fdfdfd;

      .name {
        font-size: 70rpx;
        font-weight: bold;
      }

      .textview {
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 20rpx;
      }

      .tag {
        margin-top: 20rpx;
        display: flex;
        color: white;

        view {
          padding: 10rpx;
          margin-right: 10rpx;
          border-radius: 10rpx;
        }
      }
    }
  }

  //订单详情
  .order-msg {

    margin-top: 20rpx;
    padding: 20rpx;
    border-bottom: 1px solid;

    .min {
      display: flex;
      justify-content: space-between;
      font-size: 40rpx;

      :nth-of-type(2) {
        font-weight: bold;
      }
    }

    .item {
      font-size: 35rpx;
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
    }

  }

  //按钮
  .btn{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid;
    color: white;
    height: 300rpx;
    padding-bottom: 10px;
    border-bottom: solid 1px black;

    view{
      padding: 0rpx 20rpx;
      border-radius: 30rpx;
      height: 50rpx;
      line-height: 50rpx;
      margin-top: auto;
    }
  }


}

</style>
